<template>
  <div class="home-box">
    <div class="login-box">
      <div :class="['handle', {'vertical-handle': isVertical}]">
        <div class="logo"> <img src="@/assets/img/cssc-logo.jpg" class="logo-pic" alt="logo"></div>
        <div class="handle-box">
          <div class="handle-lis titles-hx">
            <p class="welcome-p">欢迎登录</p>
          </div>
          <div class="left-container">
            <div class="handle-lis">
              <el-input class="handle-input" placeholder="请输入您的账号" v-model="addForm.username">
                <template slot="prepend">
                  <span class="cssc-login-label">{{'账\u00a0\u00a0\u00a0\u00a0号'}}</span>
                </template>
              </el-input>
            </div>
            <div class="handle-lis">
              <el-input class="handle-input" placeholder="请输入密码" v-model="addForm.password" show-password type="password">
                <template slot="prepend">
                  <span class="cssc-login-label">{{'密\u00a0\u00a0\u00a0\u00a0码'}}</span>
                </template>
              </el-input>
            </div>
            <!-- <div class="handle-lis">
              <el-input class="handle-input handle-input-hascode" placeholder="请输入验证码" v-model="addForm.authCode">
                <template slot="prepend">
                  验证码
                </template>
                <template slot="append">
                  <img class="auth-code-img" :src="codePic" @click="getCode" alt="">
                </template>
              </el-input>
            </div> -->
          </div>
          <div class="right-container">
            <p @click="submit">立即登录</p>
          </div>
          <div class="handle-link">
            <!-- <router-link class="reg" to="/reg">立即注册</router-link>
            <router-link class="find" to="/find">忘记密码</router-link> -->
          </div>
          <!-- <div class="sub-btn">
            <a href="javascript:void(0);" @click="submit">登录</a>
          </div> -->
        </div>
        <div class="decorate1 decorate-lateral"></div>
        <div class="decorate2 decorate-vertical">
          <span class="circle1 circle"></span>
          <span class="circle2 circle"></span>
          <span class="line"></span>
        </div>
        <div class="decorate3 decorate-vertical">
          <span class="circle1 circle"></span>
          <span class="circle2 circle"></span>
          <span class="line"></span>
        </div>
        <div class="decorate4 decorate-lateral"></div>
      </div>
    </div>
  </div>
</template>

<script>
// verificationCode
import { login } from '@/api/login'
import { setCookie } from '@/utils/tool'
import { encrypt } from '@/utils/rsaEncrypt'
export default {
  data () {
    return {
      isVertical: false,
      addForm: {
      },
      codePic: '',
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
        // captcha_code: [
        //   { required: true, message: "请输入验证码", trigger: "blur" },
        // ],
      }
    }
  },
  created () {
    // this.getCode()
    document.addEventListener('keydown', this.enterSubmit)
    let w = document.body.clientWidth
    let h = document.body.clientHeight
    this.isVertical = w / h < 3840 / 2160
  },
  destroyed () {
    document.removeEventListener('keydown', this.enterSubmit)
  },
  methods: {
    enterSubmit (e) {
      if (e.keyCode == '13') {
        this.submit()
      }
    },
    // async getCode () {
    //   let res = await verificationCode()
    //   this.addForm.captcha_key = res.data.uuid
    //   this.codePic = res.data.img
    // },
    async submit () {
      let data = {
        client_id: 'platform',
        client_secret: encodeURIComponent(encrypt('123456'))
      }
      
      if (!this.addForm.username) {
        this.$message.error('请输入用户名')
        return false
      }
      if (!this.addForm.password) {
        this.$message.error('请输入密码')
        return false
      }
      // if (!this.addForm.authCode) {
      //   this.$message.error('请输入验证码')
      //   return false
      // }
        

      data.grant_type = 'password'
      data.password = encodeURIComponent(encrypt(this.addForm.password))
      data.username = this.addForm.username
      //data.captcha_key = this.addForm.captcha_key
      //data.captcha_code = this.addForm.captcha_code
      // this.$refs.form.validate(async (valid) => {
      //   if (valid) {
          let [ err, res ] = await this.$awaitWrap(login({
            ...data
          }))
          if ( err ) {
            // this.getCode()
            return
          }
          setCookie('login_ticket', `Bearer ${res.data.access_token}`)
          setCookie('refresh_token', res.data.refresh_token)
          this.$router.push({
            path: '/'
          })
      //   }
      // })
    }
  }
}
</script>
<style lang="less" scoped>
.home-box {
  height: 100%;
}
.login-box {
  display: flex;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;

  .img-left {
    width: 30%;
    min-width: 312px;
    background: rgba(93, 186, 255, 1);
    height: 100%;
    overflow: hidden;
    p {
      width: 75%;
      margin: 0 auto;
      color: #fff;
    }
    .img-title {
      margin-top: 18%;
      font-size: 16px;
      line-height: 40px;
    }
    img {
      display: block;
      width: 312px;
      height: 329px;
      margin: 10% auto 0;
    }
  }
  .handle {
    background: url(~@/assets/img/backgroud.jpg) no-repeat center center;
    background-size: 100% auto;
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .logo {
      position: absolute;
      top: 31px;
      left: 32px;
      z-index: 9;
      img {
        width: 188px;
        height: 18px;
      }
    }
    .welcome-p {
      width: 128px;
      height: 45px;
      font-size: 32px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      line-height: 45px;
      border-bottom: 7px solid #4285f4;
    }
    .titles-hx {
      width: 628px !important;
      margin-bottom: 73px !important;
    }
    .left-container {
      float: left;
      width: 524px;
    }
    .right-container {
      float: left;
      width: 104px;
      background-color: #4285f4;
      margin: 16px auto 0;
      height: 98px;
      p {
        width: 40px;
        font-size: 20px;
        font-family: SourceHanSansCN-Heavy, SourceHanSansCN;
        font-weight: 800;
        color: #ffffff;
        position: relative;
        cursor: pointer;
        top: 26px;
        left: 32px;
      }
    }
    .handle-box {
      width: 628px;
      margin: 0 auto;
    }
    .login-logo {
      display: block;
      width: 163px;
      height: 81px;
      margin: 0 auto 50px;
    }
    .auth-code-img {
      position: absolute;
      cursor: pointer;
    }
    .handle-lis {
      width: 524px;
      margin: 17px auto 0;
    }
    .handle-input {
      border-radius: unset !important;
      /deep/.el-input-group__prepend {
        border-radius: unset !important;
        background: rgba(255, 255, 255, 0.2);
        font-weight: 800;
        color: #fff;
        border: unset !important;
      }
      /deep/.el-input__inner {
        background: rgba(255, 255, 255, 0.2);
        border-radius: unset !important;
        color: #fff;
        border: unset !important;
      }
    }
    .handle-input-hascode {
      overflow: hidden;
      /deep/ .el-input__inner {
        width: 335px;
        float: left;
      }
      /deep/ .el-input-group__append {
        float: left;
        height: 40px;
        width: 105px;
        // margin-left: 20px;
        background: #d8d8d8;
        border-radius: unset !important;
        border: 0;
        padding: unset;
      }
    }
    .sub-btn {
      padding-top: 20px;
      width: 500px;
      margin: 0 auto;
      a {
        display: block;
        height: 40px;
        background: rgba(66, 133, 244, 1);
        box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        border: 1px solid rgba(255, 255, 255, 1);
        text-align: center;
        line-height: 40px;
        color: #fff;
      }
    }
    .decorate-lateral {
      position: absolute;
      width: 100%;
      padding: 0 55px;
      height: 24px;
      box-sizing: border-box;
      left: 0;
      top: 66px;
      &:after {
        content: " ";
        display: block;
        height: 24px;
        background: url(~@/assets/img/cssc-bg2.png) repeat-x;
        background-size: auto 24px;
      }
    }
    .decorate-vertical {
      left: 54px;
      top: 0;
      height: 100%;
      width: 60px;
      position: fixed;
      padding: 140px 0;
      box-sizing: border-box;
      .circle {
        position: absolute;
        left: 30px;
        top: 68px;
        width: 18px;
        height: 18px;
        border: 1px solid #979797;
        border-radius: 9px;
      }
      .circle2 {
        top: auto;
        bottom: 70px;
      }
      .line {
        position: absolute;
        left: 40px;
        top: 0;
        width: 1px;
        height: 100%;
        padding: 20px 0;
        box-sizing: border-box;
        &::after {
          content: "";
          height: 100%;
          width: 1px;
          background: #979797;
          display: block;
        }
      }
      &::after {
        content: "";
        height: 100%;
        width: 60px;
        background: url(~@/assets/img/cssc-bg3.png) repeat-y;
        display: block;
        transform: rotateY(180deg);
      }
    }
    .decorate3 {
      left: auto;
      right: 54px;
      .line {
        left: 17px;
      }
      .circle {
        left: 8px;
      }
      &::after {
        transform: rotateY(0);
      }
    }
    .decorate4 {
      top: auto;
      bottom: 68px;
    }
  }
  .vertical-handle {
    background-size: auto 100%;
  }
  .handle-link {
    margin: 10px auto 0;
    width: 500px;
    display: flex;
    justify-content: space-between;
    a {
      color: #fff;
    }
  }
}
// .cssc-login-label{
//   display: block;
// }
</style>